<template>
    <el-dialog class="car-owner-add" :title="isEdit?'信息修改':'新增车主'" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="车主姓名" prop="ownerName">
                        <el-input v-model="ruleForm.ownerName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="ruleForm.sex">
                            <el-radio :label="0">男</el-radio>
                            <el-radio :label="1">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="出生日期" prop="birthDay">
                        <el-date-picker v-model="ruleForm.birthDay" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电话号码" prop="phone">
                        <el-input v-model="ruleForm.phone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="所在小区" prop="orgId">
                        <org-select v-model="ruleForm.orgId"  @select="orgSelect" :show-all="false"></org-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证号" prop="identityId">
                        <el-input v-model="ruleForm.identityId"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="微信号" prop="weChat">
                        <el-input v-model="ruleForm.weChat"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button @click="doReset">重 置</el-button>
            <el-button type="primary" @click="doConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>


<script>
import { validateTelephoneNumber,validateIdCard } from "@/util/validate";
import * as API from '@/api/business/car-owner'
export default {
    data() {
        return {
            dialogVisible: false,
            isEdit: false,
            ruleForm: {
                ownerName: '',
                sex: '',
                birthDay: '',
                phone: '',
                identityId: '',
                orgId: '',
                orgName: '',
                weChat: '',
                delFlag:0
            },
            rules: {
                ownerName: [{ required: true, message: '请输入车主姓名', trigger: 'blur' }],
                sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
                birthDay: [{ required: false, message: '请选择出生日期', trigger: 'blur' }],
                phone: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { validator: validateTelephoneNumber, trigger: 'blur' }
                ],
                identityId: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                    { validator: validateIdCard, trigger: 'blur' }
                ],
                orgId: [{ required: true, message: '请选择小区', trigger: 'blur' }],
                weChat: [{ required: false, message: '请输入微信号', trigger: 'blur' }]
            }
        }
    },
    methods: {
        show() {
            // 將ruleForm清空
            this.ruleForm = {
                ownerName: '',
                sex: '',
                birthDay: '',
                phone: '',
                identityId: '',
                orgId: '',
                orgName: '',
                weChat: '',
                delFlag:0
            }
            this.isEdit = false
            this.dialogVisible = true
            
        },
        edit(ruleForm) {
            Object.assign(this.ruleForm, ruleForm)
            this.ruleForm.sex = this.ruleForm.sex == "男"? 0:1
            this.isEdit = true
            this.dialogVisible = true
        },
        orgSelect(obj) {
            this.ruleForm.orgName = obj.name
            // ADD BY MAC
            this.ruleForm.orgId = obj.id
        },
        handleClose() {
            this.dialogVisible = false
            this.doReset()
        },
        doConfirm() {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    if (this.isEdit) {
                        API.edit(this.ruleForm).then(res => {
                            if (res.data.code === 0) {
                                this.$message.success('车主信息修改成功!')
                                this.handleClose()
                                this.$emit('table-search')
                            }
                        })
                    } else {
                        API.save(this.ruleForm).then(res => {
                            if (res.data.code === 0) {
                                this.$message.success('新增车主信息成功!')
                                this.handleClose()
                                this.$emit('table-search')
                            }
                        })
                    }
                }
            })
        },
        doReset() {
            this.$refs['ruleForm'].resetFields()
        }
    }
}
</script>

<style lang="scss" scoped>
.car-owner-add {
    .el-input {
        width: 220px;
    }
}
</style>